<template>
  <!-- 面包屑 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>参数列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card>
    <!-- 消息提示 -->
    <el-alert show-icon title="注意:只允许为第三级分类设置相关参数！" type="warning" />
    选择商品分类：
    <el-cascader v-model="value" :options="options" :props="props" @change="handleChange" />
    <!-- 标签页 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClickTab">
      <el-tab-pane label="动态参数" name="many">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand" label="" width="80">
            <template #default="scope">
              <el-tag style="margin-right: 10px;" v-for="(item, index) in scope.row.attr_arry" :key="index"> {{ item }}</el-tag>
              <el-input style="width: 50px;"  v-if="scope.row.inputVisible" ref="InputRef" class="w-20" size="small" @blur="scope.row.inputVisible = false"/>
              <el-button v-else class="button-new-tag" size="small" @click="scope.row.inputVisible = true"> + New Tag</el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="attr_name" label="参数名" width="180" />
          <el-table-column label="操作" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="only">静态属性</el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import request from "@/util/request";
import { onMounted, ref } from 'vue'
const value = ref([])

const props = {
  expandTrigger: 'hover',
  value: 'cat_id',
  label: 'cat_name',
  children: 'children',
}
// 当级联选择器改变的时候会触发，给值
const handleChange = (value) => {
  console.log(value)
  // 级联选择器改变的调用
  getCateAttr()
}

const options = ref([])
// 获取分类列表
const getCategoriesList = async () => {
  const { data, meta } = await request({
    url: `categories`,
    method: 'GET',
  })
  options.value = data
  console.log(data, meta)
}
// 生命周期
onMounted(() => {
  getCategoriesList()
})
// 标签页的数据
const activeName = ref('many')
// 标签页切换
const handleClickTab = () => {
  getCateAttr()
}
const tableData = ref([])
// 缺陷，控制了所有行的是否显示input
const inputVisible = ref(false)
// 根据id 获取分类参数列表
const getCateAttr = async () => {
  let id = 6
  const { data, meta } = await request({
    url: `categories/${id}/attributes`,
    method: 'GET',
    params: {
      sel: activeName.value,
    },
  })
  // 给数组添加新属性
  data.forEach((ele) => {
    // 0 和 '' 都是false
    if (ele) {
      ele.attr_arry = ele.attr_vals.split(' ')
      // 
    } else {
      ele.attr_arry = []
    }
     ele.inputVisible = false
  })
  tableData.value = data
  console.log(data, meta)
}
</script>

<style scoped>
.el-card {
  margin-top: 20px;
}

.m-4 {
  margin-top: 20px;
}
</style>
